<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">
      <el-row :gutter="10" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="180px" label-position="right">
          <template v-if="!loading">

            <el-col :span="24">
              <el-form-item label-width="100">
                <groupTitle style="margin-left: 21px"
                            content-position="left" :closable="false" content="开票申请"
                >
                </groupTitle>
              </el-form-item>
            </el-col>
            <el-col :span="24" >
              <el-form-item label-width="100" style="margin-left: 21px">
                <!--                <div class="JNPF-common-title">-->
                <!--                  <h2 style="font-weight: 600">费用项目明细</h2>-->
                <!--                </div>-->
                <el-table    :data="dataForm.zcbillitemList" size="mini">
                  <el-table-column type="index" width="50" label="序号" align="center"/>
                  <el-table-column  width="150" label="状态" align="status">
                    <template slot-scope="scope">
                      <p v-if="scope.row.status">待收款</p>
                    </template>
                  </el-table-column>


                  <el-table-column  width="350" prop="expenseItem" label="费用项">
                    <template slot-scope="scope">
                      <!--                      <el-input disabled v-model="scope.row.expenseItem"-->
                      <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                      <!--                      >-->
                      <!--                      </el-input>-->
                      <!--                      -->
                      <p>{{scope.row.expenseItem}}</p>

                    </template>
                  </el-table-column>
                  <el-table-column prop="expenseItem"  width="150" label="应收">
                    <template slot-scope="scope">
                      <!--                      <el-input disabled v-model="scope.row.principal"-->
                      <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                      <!--                      >-->
                      <!--                      </el-input>-->
                      <div style="text-align: left" v-html="scope.row.receiveAmount"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="expenseItem"  width="150" label="待收">
                    <template slot-scope="scope">
                      <!--                      <el-input disabled v-model="scope.row.principal"-->
                      <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                      <!--                      >-->
                      <!--                      </el-input>-->
                      <div style="text-align: left" v-html="scope.row.pendAmount"></div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="expenseItem"   width="150" label="已收">
                    <template slot-scope="scope">


                      <div   style="text-align: left"  >{{scope.row.receiveAmount-scope.row.pendAmount}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="expenseItem"   width="200" label="开票种类">
                    <template slot-scope="scope">

                      <el-select v-model="scope.row.invoiceType" placeholder="选择发票类型">
                        <el-option label="增值票普通发票" value="incremental"></el-option>
                        <el-option label="普通发票" value="normal"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" class="JNPF-table"
                                 @click="openTicket(scope.$index)"
                      >开票
                      </el-button>

                    </template>
                  </el-table-column>
                </el-table>

                <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                              ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-form>
      </el-row>
      <JNPF-Form v-if="formVisibleBill" ref="JNPFFormBill" @refresh="refresh"/>
      <BillReduce v-if="formVisible" ref="JNPFFormBillReduce" @refresh="refresh"/>
      <!--      <BillCollection v-if="formVisibleBill" ref="JNPFFormBill" @refresh="refresh"/>-->
    </div>
  </div>
</template>
<style scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{

  margin-bottom: 2px!important;
}

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}

/* 清除列表默认样式 */
ul, ol {
  list-style: none;
}

/* 清除链接默认样式 */
a {
  text-decoration: none;
  color: inherit;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 隐藏元素 */
.hidden {
  display: none !important;
}

/* 其他常用样式 */
.container {
  background-color: white;
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* 添加左右边距 */
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px; /* 调整左右边距 */
  }
}
</style>
<script>
import JNPFForm from './Form'
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import jnpf from '@/utils/jnpf'
import BillReduce from '@/views/zcgl/zcglcwbill/BillReduce'
import BillCollection from '@/views/zcgl/zcglcwbill/BillCollection'

export default {
  components: { BillCollection, PrintBrowse ,BillReduce,JNPFForm},
  // props: [],
  data() {
    return {
      formVisibleBill:false,
      formVisible:false,
      id: '',
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      dataForm: {
        id: '',
        paymentType: '',
        paymentBillNo: '',
        receiptAccount: '',
        paymentBy: '',
        paymentAccount: '',
        receiptDate: '',
        paymentCertificateFile: [],
        zcglcwbillitemList: []
      },
      paymentTypeOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      receiptAccountOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      paymentByOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      paymentAccountOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }]

    }
  },
  computed: {},
  watch: {},
  created() {
    this.id = this.$route.query.id
    this.init(this.id)
  },
  mounted() {
  },
  methods: {
    refresh(){
      this.init(this.id)
    },
    toTicket(){
      this.$router.push(`/zcgl/zcglcwbill/openTicket?id=${this.id}`)
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      //         _dataAll.paymentType = _dataAll.paymentType ? JSON.parse( _dataAll.paymentType):[]
      //         _dataAll.receiptAccount = _dataAll.receiptAccount ? JSON.parse( _dataAll.receiptAccount):[]
      //         _dataAll.paymentBy = _dataAll.paymentBy ? JSON.parse( _dataAll.paymentBy):[]
      //         _dataAll.paymentAccount = _dataAll.paymentAccount ? JSON.parse( _dataAll.paymentAccount):[]
      _dataAll.paymentCertificateFile = _dataAll.paymentCertificateFile ? JSON.parse(_dataAll.paymentCertificateFile) : []
      for (let i = 0; i < _dataAll.zcbillitemList.length; i++) {
        var _list = _dataAll.zcbillitemList[i]
      }
      this.dataForm = _dataAll
    },
    billCollection(){


      this.formVisibleBill = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBill.init(this.dataForm.id, null)
      })

    },

    billReduce(){

      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBillReduce.init(this.dataForm.id, null)
      })
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          // this.loading = true
          request({
            url: '/api/zcgl/fico/bill/getBillInfo/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    }
  }
}

</script>
<style>

</style>
